<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
        .big{
            width: 1000px;
            height: 1000px;
            border:1px solid red;
            margin: 50px auto;
            position: relative;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: -100px;
            left: 500px;
        }
        .ready{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 900px;
        }
    </style> 
</head>
<body>
    <div class="big">
        <div class="box"></div>
    </div>
    <script src="../js/tools.js"></script>
    <script>
        let big=$(".big")
        // let box=$(".big .box")
        let lastbox=$(".big .box:last-child")
        timer=null
        active(lastbox)
        if(lastbox.style.top==='900px'){
            lastbox.classList.add=("ready")
            lastbox.style.top='0px' 
            lastbox.classList.remove=("box")
                let next=document.createElement("div")
                big.appendChild(next);
                next.classList.add=("box")
            }
        function active(Ele){
            animation(Ele)
             let Top=parseFloat(getComputedStyle(Ele).top)
            function animation(ele){
            ele.timer=setInterval(function(){ 
                Top+= 100;   
            if(Top===900){
                clearInterval(ele.timer)
            }
            ele.style.top=Top+"px"
            },300)
            }
            
            onkeydown = function(e){
                if(Ele.style.top==="900px"){  
                    return
                }
                switch(e.keyCode){
                // 右39 左37
                // 上38 下40
                case 39:
                    if(Ele.style.left==='900px'){
                        break
                    }
                Ele.style.left = Ele.offsetLeft + 100 + 'px'
                    break
                case 37:   
                if(Ele.style.left==='0px'){
                        break
                    }         
                Ele.style.left = Ele.offsetLeft - 100 + 'px'
                    break
                } 
            }
            console.log(1);
            // box1.style.left=Math.random*900;
        }
        
        //创建新box
        

        // animation(box1,num,900,attr)
      
   </script>
</body>
</html>